<template>
	<div class="w-full h-full flex flex-col bg-bg-9 overflow-hidden">
		<activity-header />
		<div class="overflow-y-auto">
			<activity-tab />
		</div>
	</div>
</template>
<script lang="ts" setup>
import ActivityHeader from './activity-header.vue'
import ActivityTab from './activity-tab.vue'
import { onMounted, watch } from 'vue'
import {
	useAccountStore,
	useActivityStore,
	useAppStore,
	useProfileStore,
	useWalletStore
} from '@/store'
import { debounce } from 'lodash-es'

const accountStore = useAccountStore()
const activityStore = useActivityStore()
const profileStore = useProfileStore()
const walletStore = useWalletStore()

const getConfig = async () => {
	await Promise.all([
		// activityStore.getRewardsConfig(),
		// !accountStore.isLogin && activityStore.getBonusActivities(),
		// activityStore.getVipList(),
		activityStore.vipPanel(),
		activityStore.getStarList(),
		activityStore.starPanel()
	])
}

const updateUser = async () => {
	try {
		if (accountStore.isLogin) {
			await Promise.all([
				profileStore.getUserInfo(),
				activityStore.getUserUpgradeInfo(),
				activityStore.getBonusActivities()
				// activityStore.getProgressiveData(),
				// activityStore.getRewardsStat()
			])
		}
	} catch (err) {
		console.log(err)
	}
}

watch(
	() => useAppStore().region,
	() => getConfig()
)
watch(
	() => accountStore.isLogin,
	() => updateUser()
)

const debounceUpdateUser = debounce(() => updateUser(), 15000, { leading: true })
watch(
	() => Number(walletStore.balance),
	(value) => value > 0 && debounceUpdateUser(),
	{ immediate: true }
)
onMounted(() => {
	Promise.all([getConfig(), updateUser()])
})
</script>
<style scoped></style>
